<!DOCTYPE html>
<html lang="cmn-Hans" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>帐号设置</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="keywords" content="fly,layui,前端社区">
    <meta name="description" content="Fly社区是模块化前端UI框架Layui的官网社区，致力于为web开发提供强劲动力">
    <link rel="stylesheet" th:href="@{/frame/layui/css/layui.css}">
    <link rel="stylesheet" th:href="@{/frame/flyres/css/global.css}">
</head>
<body>
<div th:replace="customer/top :: topBar"></div>
<div class="layui-container fly-marginTop fly-user-main">
    <div th:replace="customer/left :: leftBar"></div>
    <div class="fly-panel fly-panel-user" pad20>
        <div class="layui-tab layui-tab-brief" lay-filter="user">
            <ul class="layui-tab-title" id="LAY_mine">
                <li class="layui-this" lay-id="info">基本资料</li>
                <li lay-id="avatar">修改头像</li>
                <li lay-id="pass">修改密码</li>
                <li lay-id="bind">邮箱绑定</li>
            </ul>
            <div class="layui-tab-content" style="padding: 20px 0;">
                <div class="layui-form layui-form-pane layui-tab-item layui-show">
                    <form method="post" onsubmit="return false">
                        <div class="layui-form-item">
                            <label for="L_username" class="layui-form-label">昵称</label>
                            <div class="layui-input-inline">
                                <input type="text" id="L_username" name="username" required lay-verify="required"
                                       autocomplete="off" th:value="${session.current_customer.username}" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">性别</label>
                            <div class="layui-input-block">
                                <input type="radio" name="gender" value="保密" title="保密" th:checked="${session.current_customer.gender} eq '保密'"/>
                                <input type="radio" name="gender" value="男" title="男" th:checked="${session.current_customer.gender} eq '男'"/>
                                <input type="radio" name="gender" value="女" title="女" th:checked="${session.current_customer.gender} eq '女'"/>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">注册时间</label>
                            <div class="layui-input-inline">
                                <input type="text" name="city" autocomplete="off"
                                       th:value="${session.current_customer.registertime}"
                                       class="layui-input layui-disabled" disabled>
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label for="L_sign" class="layui-form-label">签名</label>
                            <div class="layui-input-block">
                                <textarea placeholder="随便写些什么刷下存在感" id="L_sign" name="sign" autocomplete="off"
                                          class="layui-textarea"
                                          style="height: 80px;" th:utext="${session.current_customer.signature}"></textarea>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <button class="layui-btn" key="set-mine" onclick="updateInfo()" lay-filter="updateInfo"
                                    lay-submit>确认修改
                            </button>
                        </div>
                    </form>
                </div>

                <div class="layui-form layui-form-pane layui-tab-item">
                    <div class="layui-form-item">
                        <div class="avatar-add">
                            <p>建议尺寸168*168，支持jpg、png、gif，最大不能超过50KB</p>
                            <button type="button" class="layui-btn" id="test1">
                                <i class="layui-icon">&#xe67c;</i>上传图片
                            </button>
                            <img th:src="@{'/picture/getAvatar?fileName='+${session.current_customer.avatar}}" alt="头像">
                            <span class="loading"></span>
                        </div>
                    </div>
                </div>

                <div class="layui-form layui-form-pane layui-tab-item">
                    <form action="" method="post" onsubmit="return false">
                        <div class="layui-form-item">
                            <label for="L_nowpass" class="layui-form-label">当前密码</label>
                            <div class="layui-input-inline">
                                <input type="password" id="L_nowpass" name="nowpass" required lay-verify="required"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label for="L_pass" class="layui-form-label">新密码</label>
                            <div class="layui-input-inline">
                                <input type="password" id="L_pass" name="pass" required lay-verify="required"
                                       autocomplete="off" class="layui-input">
                            </div>
                            <div class="layui-form-mid layui-word-aux">6到16个字符</div>
                        </div>
                        <div class="layui-form-item">
                            <label for="L_repass" class="layui-form-label">确认密码</label>
                            <div class="layui-input-inline">
                                <input type="password" id="L_repass" name="repass" required lay-verify="required"
                                       autocomplete="off" class="layui-input">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <button class="layui-btn" key="set-mine" lay-submit lay-filter="resetpass"
                                    onclick="resetpass()">确认修改
                            </button>
                        </div>
                    </form>
                </div>
                <div class="layui-form layui-form-pane layui-tab-item">
                    <ul class="app-bind">
                        <li class="fly-msg app-havebind">
                            <label class="layui-form-label">邮箱地址：</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" id="iemail" th:value="${session.current_customer.email}">
                            </div>
                            <div class="layui-input-inline">
                                <button class="layui-btn" id="btnSendCode" onclick="sendMessage()">发送验证码</button>
                                <script>
                                    let InterValObj; //timer变量，控制时间
                                    const count = 60; //间隔函数，1秒执行
                                    let curCount;//当前剩余秒数
                                    //发送短信验证码
                                    function sendMessage() {
                                        const re = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/;
                                        if (!re.test(document.getElementById("iemail").value)) {
                                            layui.layer.msg("请输入正确的邮箱格式！");
                                            return
                                        } else {
                                            const xhr = new XMLHttpRequest();
                                            xhr.open('post', '[[@{/authCode/sendToMail}]]', false);
                                            xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                                            xhr.send('emailaddr=' + document.getElementById("iemail").value);
                                            layui.layer.msg(JSON.parse(xhr.responseText).msg);
                                        }
                                        curCount = count;
                                        // 设置button效果，开始计时
                                        document.getElementById("btnSendCode").setAttribute("disabled", "disabled");//设置按钮为禁用状态
                                        document.getElementById("btnSendCode").innerText = curCount + "秒后重获";//更改按钮文字
                                        InterValObj = window.setInterval(SetRemainTime, 1000); // 启动计时器timer处理函数，1秒执行一次
                                    }

                                    //timer处理函数
                                    function SetRemainTime() {
                                        if (curCount === 0) {//超时重新获取验证码
                                            window.clearInterval(InterValObj);// 停止计时器
                                            document.getElementById("btnSendCode").removeAttribute("disabled");//移除禁用状态改为可用
                                            document.getElementById("btnSendCode").innerText = "重获验证码";
                                        } else {
                                            curCount--;
                                            document.getElementById("btnSendCode").innerText = curCount + "秒后重获";
                                        }
                                    }
                                </script>
                            </div>
                        </li>
                        <li class="fly-msg app-havebind">
                            <label class="layui-form-label">验证码：</label>
                            <div class="layui-input-inline">
                                <input class="layui-input" id="emailcode">
                            </div>
                            <div class="layui-input-inline">
                                <button class="layui-btn" id="enterbind" onclick="enterbind()">确认绑定</button>
                            </div>
                            <script>
                                function enterbind() {
                                    const xhr = new XMLHttpRequest();
                                    xhr.open('post', '[[@{/customer/bindEmail}]]', false);
                                    xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
                                    xhr.send('emailaddr=' + document.getElementById("iemail").value + '&code=' + document.getElementById("emailcode").value);
                                    layui.layer.msg(JSON.parse(xhr.responseText).msg);
                                }
                            </script>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>
<script th:src="@{/frame/layui/layui.js}"></script>
<script>
    layui.cache.page = 'user';
    layui.cache.user = {
        username: '游客'
        , uid: -1
        , avatar: '[[@{/frame/flyres/images/avatar/00.jpg}]]'
        , experience: 83
        , sex: '男'
    };
    layui.config({
        version: "2.0.0"
        , base: '/frame/flyres/mods/'
    }).extend({
        fly: 'index'
    }).use(['element', 'fly', 'upload', 'form'], function () {
        const $ = layui.$;
        $(function () {
            $('#leftbar li').eq(3).addClass('layui-this');
        });

        const upload = layui.upload;

        //执行实例
        upload.render({
            elem: '#test1' //绑定元素
            , url: '[[@{/customer/uploadAvatar}]]' //上传接口
            , done: function (res) {
                layer.msg('头像上传成功！', {icon: 1, time: 1000});
                location.reload();
            }
            , error: function () {
                layer.msg("头像上传失败！", {icon: 2, time: 1000});
            }
        });

        window.resetpass = function () {
            if ($('#L_pass').val() !== $('#L_repass').val()) {
                layer.msg('两次输入的密码不相同！', {icon: 2, time: 2000});
            } else {
                $.ajax({
                    type: 'post',
                    url: '[[@{/customer/resetPassword}]]',
                    async: 'false',
                    data: {
                        oldpass: $('#L_nowpass').val(),
                        newpass: $('#L_pass').val()
                    },
                    dataType: 'json',
                    success: function (res) {
                        if (res.issuccess) {
                            layer.msg('密码重置成功！', {icon: 1, time: 2000});
                        } else {
                            layer.msg(res.msg, {icon: 2, time: 2000});
                        }
                    },
                    error: function () {
                        layer.msg('重置密码失败！', {icon: 2, time: 2000});
                    }
                });
            }
        };

        window.updateInfo = function () {
            $.ajax({
                type: 'post',
                url: '[[@{/customer/updateInfo}]]',
                async: 'false',
                data: {
                    username: $('#L_username').val(),
                    gender: $("input[name='gender']:checked").val(),
                    signature: $('#L_sign').val()
                },
                dataType: 'json',
                success: function (res) {
                    layer.msg('信息更新成功！', {icon: 1, time: 2000});
                },
                error: function () {
                    layer.msg('信息更新失败！', {icon: 2, time: 2000});
                }
            });
        }
    });
</script>
</body>
</html>